<template>
    <div class="book-detail-container">
        <!-- 图书基本信息 -->
        <div class="book-info">
            <h2>{{ book.title }}</h2>
            <p><strong>作者：</strong>{{ book.author }}</p>
            <p><strong>出版社：</strong>{{ book.publisher }}</p>
            <p><strong>出版日期：</strong>{{ book.publishDate }}</p>
            <p><strong>ISBN：</strong>{{ book.isbn }}</p>
            <p><strong>简介：</strong>{{ book.description }}</p>
        </div>

        <!-- 用户评价 -->
        <div class="user-reviews">
            <h3>用户评价</h3>
            <el-card v-for="(review, index) in reviews" :key="index" class="review-card">
                <p><strong>{{ review.user }}</strong></p>
                <p>{{ review.comment }}</p>
            </el-card>
        </div>

        <!-- 借阅按钮 -->
        <el-button type="primary" @click="openBorrowDialog">借阅</el-button>

        <!-- 分步借阅弹窗 -->
        <el-dialog v-model="borrowDialogVisible" title="借阅流程" width="50%">
            <el-steps :active="currentStep" finish-status="success" simple>
                <el-step title="书籍信息" description="确认书籍信息"></el-step>
                <el-step title="选择借阅时长" description="选择借书和还书日期"></el-step>
                <el-step title="确认借阅信息" description="确认借阅信息"></el-step>
            </el-steps>

            <div v-if="currentStep === 1" class="borrow-step">
                <h4>书籍信息</h4>
                <p><strong>书名：</strong>{{ book.title }}</p>
                <p><strong>作者：</strong>{{ book.author }}</p>
                <p><strong>ISBN：</strong>{{ book.isbn }}</p>
                <el-button type="success" @click="nextStep">下一步</el-button>
            </div>

            <div v-if="currentStep === 2" class="borrow-step">
                <h4>选择借阅时长</h4>
                <el-date-picker v-model="borrowDate" type="date" placeholder="选择借书日期"></el-date-picker>
                <el-date-picker v-model="returnDate" type="date" placeholder="选择还书日期"></el-date-picker>
                <el-button type="success" @click="nextStep">下一步</el-button>
            </div>

            <div v-if="currentStep === 3" class="borrow-step">
                <h4>确认借阅信息</h4>
                <p><strong>书名：</strong>{{ book.title }}</p>
                <p><strong>作者：</strong>{{ book.author }}</p>
                <p><strong>借书日期：</strong>{{ borrowDate }}</p>
                <p><strong>还书日期：</strong>{{ returnDate }}</p>
                <el-button type="success" @click="completeBorrow">完成借阅</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const book = {
    title: "Vue.js 实战",
    author: "尤雨溪",
    publisher: "电子工业出版社",
    publishDate: "2023-01-01",
    isbn: "978-7-121-39000-1",
    description: "深入学习 Vue.js 的核心原理与实战技巧。",
};

const reviews = ref([
    { user: "张三", comment: "这本书非常实用，适合初学者！" },
    { user: "李四", comment: "内容很详细，推荐给大家！" },
]);

const borrowDialogVisible = ref(false);
const currentStep = ref(1);
const borrowDate = ref(null);
const returnDate = ref(null);

const openBorrowDialog = () => {
    borrowDialogVisible.value = true;
    currentStep.value = 1;
};

const nextStep = () => {
    if (currentStep.value === 2 && (!borrowDate.value || !returnDate.value)) {
        ElMessage.error("请选择借书和还书日期！");
    } else {
        currentStep.value += 1;
    }
};

const completeBorrow = () => {
    if (borrowDate.value && returnDate.value) {
        if (new Date(borrowDate.value) < new Date(returnDate.value)) {
            ElMessage.success("借阅成功！");
            borrowDialogVisible.value = false;
        } else {
            ElMessage.error("借书日期必须早于还书日期！");
        }
    } else {
        ElMessage.error("请选择借书和还书日期！");
    }
};
</script>

<style scoped>
.book-detail-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.book-info {
    margin-bottom: 20px;
}

.user-reviews {
    margin-bottom: 20px;
}

.review-card {
    margin-bottom: 10px;
}

.borrow-step {
    text-align: center;
}

.el-button {
    display: block;
    margin: 20px auto;
}

.el-date-picker {
    margin-bottom: 10px;
}

/* 媒体查询：移动端适配 */
@media (max-width: 768px) {
    .book-detail-container {
        padding: 10px;
    }

    .el-dialog {
        width: 90% !important;
    }

    .el-date-picker {
        width: 100%;
    }

    .el-button {
        width: 100%;
    }
}
</style>